<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 2px;
            height: 1px;
            background-color: green;
            position: absolute;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //获取div,产生动画效果
                //animate方法；
                /*
                * 参数:
                * 1.是键值对---对象
                * 2.时间---1000毫秒---1秒
                * 3.匿名函数---回调函数
                *
                * */
                $("#dv").animate({
                    "width":"300",
                    "height":"300",
                    "left":"300"
                },2000,function () {
                    $(".box").animate({
                        "width":"50",
                        "height":"30",
                        "left":"800",
                        "top":"300",
                        "opacity":0.2
                    },1000, function () {
                        $(".box1").animate({
                            "width":"50",
                            "height":"50",
                            "left":"1100",
                            "top":"50" ,
                            "backgroundColor":"red",
                            "borderRadius":"50%"
                        },500, function () {
                            $(".box2").animate({
                                "width":"80",
                                "height":"80",
                                "left":"1100",
                                "top":"150" ,
                                "backgroundColor":"red",
                                "borderRadius":"50%"
                            },400, function () {
                                $(".box3").animate({
                                    "width":"100",
                                    "height":"100",
                                    "left":"1100",
                                    "top":"250" ,
                                    "backgroundColor":"red",
                                    "borderRadius":"50%"
                                },300)
                            })
                        })
                    });
                });
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>